<template>
	<div class="top_t">
		<div class="top_1">
			<h4 style="margin: 0px;padding: 0px;">房屋/商铺区域管理</h4>
			<div class="sub_1">管理小区的建筑结构，常见的小区结构为“区域 - 楼宇 - 单元 - 楼层 - 房屋”，</div>
			<div class="sub_2">也可以选择不开启 “楼宇”、“单元”，直接使用“区域 - 房屋”的结构，常用于“别墅区”、“商业区”。</div>
		</div>
		<div class="t-btn">
			<button class="t-btn_1">区域 - 楼宇 - 单元的关系</button>
		</div>
	</div>
	<div class="bot">
		<div class="bot_left">
			<h4 style="margin: 0px;padding: 0px;letter-spacing: 2px;">房屋/商铺区域<span
					style="color: #c2c2c2;font-size: 12px;font-weight: 400;">(拖动可排序)</span></h4>
			<div>
				<div>
					<div class="name" v-for="(name, index) in data.region" :key="name.id" :tabindex="0"
						:class="{'selected': selectedIndex === index}" @click="handleSelection(index)"
						@focus="handleFocus(name.id)">
						<div style="font-size: 14px;">{{ name.regionName }}</div>
						<div>
							<el-button style="border-radius: 5px; font-size: 14px;"
								@click="openDialog3(index)">修改</el-button>
							<el-dialog v-model="dialogVisible3[index]" center
								style="width: 400px; height: 200px; overflow: hidden;">
								<el-input v-model="uRegion.regionName" placeholder="输入楼宇名称"></el-input>
								<template #footer>
									<div class="dialog-footer">
										<el-button @click="closeDialog3(index)">取消</el-button>
										<el-button
											@click="updateRegion(name.id); closeDialog3(index)">确定</el-button>
									</div>
								</template>
							</el-dialog>
							<el-button style="border-radius: 5px;" @click="openDialog4(index)">删除</el-button>
							<el-dialog v-model="dialogVisible4[index]" center
								style="width: 400px; height: 200px; overflow: hidden;">
								<p style="text-align: center;font-size: 24px; height: 10px; font-weight: 700;">确定删除吗</p>
								<template #footer>
									<div class="dialog-footer">
										<el-button @click="closeDialog4(index)">取消</el-button>
										<el-button
											@click="delRegion(name.id); closeDialog4(index)">确定</el-button>
									</div>
								</template>
							</el-dialog>
						</div>
					</div>
				</div>
				<div>
					<button class="t-btn_1" @click="centerDialogVisible = true">+添加区域</button>
				</div>
				<el-dialog v-model="centerDialogVisible" title="添加区域" width="1000" align-center
					style="border-radius: 10px;">
					<div class="add-building-dialog-container">
						<div class="add-building-dialog-content">
							<div class="add-building-item">
								<el-form>
									<el-form-item>
										<el-input v-model="add.regionName" placeholder="输入区域名称"></el-input>
									</el-form-item>
								</el-form>
							</div>
							<div class="add-building-item kq">
								<div class="el-switch is-checked">
									<el-input type="checkbox" name true-value="true" class="el-input_switch"></el-input>
									<el-switch v-model="value1" class="el-switch_core"
										style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
								</div>
							</div>
							<div class="add-building-item l-tip" style="text-align: left;">不开启可在区域下直接录入房屋，适用于别墅区等没有楼宇的区域
							</div>
						</div>
						<div>
							<div class="el-image" style="width: 100%; height: 300px;">
								<img src="../img/添加区域.png" class="el-image__inner" style="object-fit: contain;">
							</div>
						</div>
					</div>
					<template #footer>
						<div class="dialog-footer">
							<el-button @click="centerDialogVisible = false" class="but3">取消</el-button>
							<el-button type="primary" @click="addRegion" class="but4">
								确定
							</el-button>
						</div>
					</template>
				</el-dialog>
			</div>
		</div>
		<div class="bot_rig">
			<h4 style="margin: 0px;padding: 0px;letter-spacing: 2px;">楼宇<span
					style="color: #c2c2c2;font-size: 12px;font-weight: 400;">(拖动可排序)</span></h4>
			<div>
				<div>
					<div class="name" v-for="(name, index) in data.build" :key="name.buildingId" :tabindex="0"
						:class="{'selected': selectedIndex2 === index}" @click="handleSelection2(index)"
						@focus="handleFocus2(name.buildingId)">
						<div style="font-size: 14px;">{{ name.buildingName }}</div>
						<div>
							<el-button style="border-radius: 5px; font-size: 14px;"
								@click="openDialog(index)">修改</el-button>
							<el-dialog v-model="dialogVisible[index]" center
								style="width: 400px; height: 200px; overflow: hidden;">
								<el-input v-model="uBuild.buildingName" placeholder="输入楼宇名称"></el-input>
								<template #footer>
									<div class="dialog-footer">
										<el-button @click="closeDialog(index)">取消</el-button>
										<el-button
											@click="updateBuild(name.buildingId); closeDialog(index)">确定</el-button>
									</div>
								</template>
							</el-dialog>
							<el-button style="border-radius: 5px;" @click="openDialog2(index)">删除</el-button>
							<el-dialog v-model="dialogVisible2[index]" center
								style="width: 400px; height: 200px; overflow: hidden;">
								<p style="text-align: center;font-size: 24px; height: 10px; font-weight: 700;">确定删除吗</p>
								<template #footer>
									<div class="dialog-footer">
										<el-button @click="closeDialog2(index)">取消</el-button>
										<el-button
											@click="delBuild(name.buildingId); closeDialog2(index)">确定</el-button>
									</div>
								</template>
							</el-dialog>
						</div>
					</div>
					<button class="t-btn_1" @click="centerDialogVisible2 = true">+添加楼宇</button>
				</div>
				<el-dialog v-model="centerDialogVisible2" title="添加区域" width="1000" align-center
					style="border-radius: 10px;">
					<div class="add-building-dialog-container">
						<div class="add-building-dialog-content">
							<div class="add-building-item">
								<el-form>
									<el-form-item>
										<el-input v-model="aBuild.buildingName" placeholder="输入楼宇名称"></el-input>
									</el-form-item>
								</el-form>
							</div>
							<div class="add-building-item kq">
								<span style="margin-right: 15px;">是否开启楼宇</span>
								<div class="el-switch is-checked">
									<el-input type="checkbox" name true-value="true" class="el-input_switch"></el-input>
									<el-switch v-model="value1" class="el-switch_core"
										style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
									<span style="margin-left: 10px;color: #00c36ds;">已开启</span>
								</div>
							</div>
							<div class="add-building-item l-tip" style="text-align: left;">
								不开启可在楼宇下直接录入房屋，适用于1栋楼只有1个门禁的情况</div>
						</div>
						<div>
							<div class="el-image" style="width: 100%; height: 300px;">
								<img src="../img/添加区域.png" class="el-image__inner" style="object-fit: contain;">
							</div>
						</div>
					</div>
					<template #footer>
						<div class="dialog-footer">
							<el-button @click="centerDialogVisible2 = false" class="but3">取消</el-button>
							<el-button type="primary" @click="addBuild" class="but4">
								确定
							</el-button>
						</div>
					</template>
				</el-dialog>
			</div>
		</div>
		<div class="bot_rig_3">
			<h4 style="margin: 0px;padding: 0px;letter-spacing: 2px;">单元</h4>
			<div>
				<div>
					<div class="name" v-for="(name, index) in data.unit" :key="name.unitId" :tabindex="0"
						:class="{'selected': selectedIndex3 === index}" @click="handleSelection3(index)"
						@focus="handleFocus3(name.unitId)">
						<div style="font-size: 14px;">{{ name.unitName }}</div>
						<div>
							<el-button style="border-radius: 5px; font-size: 14px;"
								@click="openDialog5(index)">修改</el-button>
							<el-dialog v-model="dialogVisible5[index]" center
								style="width: 400px; height: 200px; overflow: hidden;">
								<el-input v-model="uUnit.unitName" placeholder="输入单元名称"></el-input>
								<template #footer>
									<div class="dialog-footer">
										<el-button @click="closeDialog5(index)">取消</el-button>
										<el-button
											@click="updateUnit(name.unitId); closeDialog5(index)">确定</el-button>
									</div>
								</template>
							</el-dialog>
							<el-button style="border-radius: 5px;" @click="openDialog6(index)">删除</el-button>
							<el-dialog v-model="dialogVisible6[index]" center
								style="width: 400px; height: 200px; overflow: hidden;">
								<p style="text-align: center;font-size: 24px; height: 10px; font-weight: 700;">确定删除吗</p>
								<template #footer>
									<div class="dialog-footer">
										<el-button @click="closeDialog6(index)">取消</el-button>
										<el-button
											@click="delUnit(name.unitId); closeDialog6(index)">确定</el-button>
									</div>
								</template>
							</el-dialog>
						</div>
					</div>
					<button class="t-btn_1" @click="centerDialogVisible3 = true">+添加单元</button>
					<el-dialog v-model="centerDialogVisible3" title="添加单元" width="1000" align-center
						style="border-radius: 10px;">
						<div class="add-building-dialog-container">
							<div class="add-building-dialog-content">
								<div class="add-building-item">
									<el-form>
										<el-form-item>
											<el-input v-model="aUnit.unitName" placeholder="输入单元名称"></el-input>
										</el-form-item>
									</el-form>
								</div>
							</div>
							<div>
								<div class="el-image" style="width: 100%; height: 300px;">
									<img src="../img/添加区域.png" class="el-image__inner" style="object-fit: contain;">
								</div>
							</div>
						</div>
						<template #footer>
							<div class="dialog-footer">
								<el-button @click="centerDialogVisible3 = false" class="but3">取消</el-button>
								<el-button type="primary" @click="addUnit" class="but4">
									确定
								</el-button>
							</div>
						</template>
					</el-dialog>
				</div>
			</div>
		</div>
		<div class="bot_rig_2">
			<h4 style="margin: 0px;padding: 0px; text-align: left;margin-bottom: 100px;">车场信息</h4>
			<div class="parking-info">
				<div class="parking-info_1">
					<img src="../img/房屋.png" style="width: 350px;height: 100%;" />
					<div>
						<div style="color: rgb(0,195,109); margin-top: 40px;font-size: 32px;font-weight: 700;">
							{{data.hsNum}}
						</div>
						<div style="font-size: 14px;">房屋数量</div>
						<el-button
							style="padding: 10px 20px;color: white; background-color: #00c36d;border: none;margin-top: 30px;" @click="AddHouse">
							去添加房屋
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		unref
	} from 'vue'
	import $http from '../router/AxiosApi';
	import {
		useRouter
	} from 'vue-router'
	import {
		InfoFilled
	} from '@element-plus/icons-vue'
	import {
		ClickOutside as vClickOutside
	} from 'element-plus'
const router = useRouter()

	const centerDialogVisible = ref(false)
	const centerDialogVisible2 = ref(false)
	const centerDialogVisible3 = ref(false)
	const value1 = ref(true)
	const value2 = ref(true)
	const disabled = ref(false);
	const selectedIndex = ref(0)
	const focusedId = ref(null);
	const selectedIndex2 = ref(0)
	const focusedId2 = ref(null);
	const selectedIndex3 = ref(0)
	const focusedId3 = ref(null);

	const dialogVisible = ref([]);
	const openDialog = (index) => {
		dialogVisible.value[index] = true; // 打开指定索引的对话框
	};
	const closeDialog = (index) => {
		dialogVisible.value[index] = false; // 关闭指定索引的对话框
	};
	const dialogVisible2 = ref([]);
	const openDialog2 = (index) => {
		dialogVisible2.value[index] = true; // 打开指定索引的对话框
	};
	const closeDialog2 = (index) => {
		dialogVisible2.value[index] = false; // 关闭指定索引的对话框
	};
	
	const dialogVisible3 = ref([]);
	const openDialog3 = (index) => {
		dialogVisible3.value[index] = true; // 打开指定索引的对话框
	};
	const closeDialog3 = (index) => {
		dialogVisible3.value[index] = false; // 关闭指定索引的对话框
	};
	
	const dialogVisible4 = ref([]);
	const openDialog4 = (index) => {
		dialogVisible4.value[index] = true; // 打开指定索引的对话框
	};
	const closeDialog4 = (index) => {
		dialogVisible4.value[index] = false; // 关闭指定索引的对话框
	};
	
	const dialogVisible5 = ref([]);
	const openDialog5 = (index) => {
		dialogVisible5.value[index] = true; // 打开指定索引的对话框
	};
	const closeDialog5 = (index) => {
		dialogVisible5.value[index] = false; // 关闭指定索引的对话框
	};
	const dialogVisible6 = ref([]);
	const openDialog6 = (index) => {
		dialogVisible6.value[index] = true; // 打开指定索引的对话框
	};
	const closeDialog6 = (index) => {
		dialogVisible6.value[index] = false; // 关闭指定索引的对话框
	};
	// 处理焦点事件  
	function handleSelection(index) {
		selectedIndex.value = index;
	}
	async function handleFocus(id) {
		console.log("id:" + id)
		focusedId.value = id;
		handleSelection2(0)
		await loadBuild(id)
		if (data.build != null && data.build.length != 0) {
			await loadUnit(data.build[0].buildingId)
			console.log(data.unit)
			await loadHsNum(data.unit[0].unitId)
		} else {
			data.unit.length = 0;
			data.hsNum = 0;
		}
	}

	// 处理焦点事件 
	function handleSelection2(index) {
		selectedIndex2.value = index;

	}
	async function handleFocus2(id) {
		focusedId2.value = id;
		await loadUnit(id);
		if (data.unit.length == 0) {
			console.log("长度：" + data.unit.length)
			data.hsNum = 0
		} else {
			await loadHsNum(data.unit[0].unitId)
		}
		selectedIndex3.value = 0;
	}

	// 处理焦点事件  
	function handleFocus3(id) {
		focusedId3.value = id;
		console.log('Focused element ID3:', focusedId3.value);
	}

	function handleSelection3(index) {
		selectedIndex3.value = index;
	}

	//添加区域
	const add = reactive({
		regionName: ''
	})
	const addRegion = () => {
		$http.post("AddRegion", add).then((res) => {
			centerDialogVisible.value = false;
			loadregion()
		})
	}
	//查询所有信息
	const data = reactive({
		region: [],
		build: [],
		unit: [],
		hsNum: ''
	})
	onMounted(() => {
		loadregion()
		handleFocus(1)
	})
	//查询区域
	const loadregion = () => {
		$http.post("selectRegion")
			.then((res) => {
				console.log(res.data)
				data.region = res.data
			})
	}
	//查询楼宇
	const loadBuild = async (regionId) => {
		console.log("f:", regionId)
		data.build.values(null)
		await $http.post("selectBuilding", {
			regionId
		}).then((res) => {

			data.build = res.data
			console.log(data.build)
		})
	}
	//查询单元
	const loadUnit = async (buildingId) => {
		console.log("f2:", buildingId)
		await $http.post("selectUnit", {
			buildingId
		}).then((res) => {
			console.log(res.data)
			data.unit = res.data
		})
	}
	//查询房屋数量
	const loadHsNum = async (unitId) => {
		await $http.post("findHsNum", {
			unitId
		}).then((res) => {
			console.log(res.data)
			data.hsNum = res.data
		})
	}
	//添加楼宇
	const aBuild = reactive({
		buildingName: '',
		regionId: ''
	})
	const addBuild = () => {
		aBuild.regionId = focusedId
		$http.post("AddBuild", aBuild).then((res) => {
			centerDialogVisible2.value = false
			console.log(res.data)
			loadBuild(focusedId.value)
			aBuild.buildingName = ''
		})
	}
	//修改楼宇
	const uBuild = reactive({
		buildingName: '',
		buildingId: ''
	})
	const updateBuild = (id) => {
		closeDialog(selectedIndex2.value)
		uBuild.buildingId = id
		console.log(uBuild)
		$http.put("UpdateBuild", uBuild).then((res) => {
			loadBuild(focusedId.value)
			uBuild.buildingName = ''
		})
	}
	//删除楼宇
	const delBuild = (buildingId) => {
	    $http.delete(`deleteBuild?id=${buildingId}`).then((res) => {
	        loadBuild(focusedId.value); // 根据需要调整参数
	    });
	}
	
	//删除区域
	const delRegion = (regionId) => {
		console.log(regionId)
	    $http.delete(`delRegion?id=${regionId}`).then((res) => {
			loadregion()
	    });
	}
	//修改区域
	const uRegion = reactive({
		regionName: '',
		id: ''
	})
	const updateRegion = (id) => {
		closeDialog(selectedIndex3.value)
		uRegion.id = id
		$http.put("updateRegion", uRegion).then((res) => {
			loadregion()
			uRegion.regionName = ''
		})
	}
	//添加单元
	const aUnit=reactive({
		unitName:'',
		buildingId:''
	})
	const addUnit=()=>{
		aUnit.buildingId=focusedId2.value
		console.log("aUnit:"+aUnit.buildingId)
		$http.post("AddUnit", aUnit).then((res) => {
			centerDialogVisible3.value = false
			console.log(res.data)
			loadUnit(focusedId2.value)
			aUnit.unitName=''
		})
	}
	
	//修改单元
	const uUnit =reactive({
		unitId:'',
		unitName:''
	})
	const updateUnit = (id)=>{
		uUnit.unitId=id
		console.log(uUnit.unitId,uUnit.unitName)
		$http.put("updateUnit",uUnit).then((res)=>{
			loadUnit(focusedId2.value)
			uUnit.unitName=''
		})
	}
	//删除单元
	const delUnit = (unitId) => {
		console.log(unitId)
	    $http.delete(`delUnit?id=${unitId}`).then((res) => {
			loadUnit(focusedId2.value)
			selectedIndex3.value = 0; 
	    });
	}
	
	const AddHouse = () => {
		router.push({
			name: 'AddHouse'
		});
	}
</script>

<style scoped>
	.top_t {
		border-radius: 10px;
		background-color: white;
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.bot {
		margin-top: 15px;
		overflow: hidden;
	}

	.bot_left {
		border-radius: 10px;
		background-color: white;
		width: 300px;
		float: left;
		margin-right: 10px;
	}

	.sub_1 {
		margin-top: 8px;
		font-size: 14px !important;
		color: #7e8081;
	}

	.sub_2 {
		margin-top: 2px;
		font-size: 14px !important;
		color: #7e8081;
	}

	.t-btn {
		padding: 0px;
		margin: 0px;
		font-size: 14px;
	}

	.t-btn_1 {
		background-color: white;
		border: none;
		color: #395899;
		height: 76px;
	}

	.el-dialog {
		margin-top: 15vh;
		width: 1040px;
	}

	.el-input {
		width: 300px;
		height: 40px;
	}

	.kq {
		text-align: left;
	}

	.el-dialog__body {
		padding: 24px 32px;
		color: #2b3451;
		font-size: 14px;
		word-break: break-all;
	}

	.add-building-dialog-content {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.add-building-dialog-container {
		padding: 80px 32px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-between;
	}

	.add-building-item {
		margin-bottom: 34px;
	}

	.el-switch {
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: relative;
		font-size: 14px;
		line-height: 20px;
		height: 20px;
		vertical-align: middle;
	}

	.el-input_switch {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
	}

	.el-switch_core {
		margin: 0;
		display: inline-block;
		position: relative;
		width: 40px;
		height: 20px;
		border: 1px solid #dcdfe6;
		outline: none;
		border-radius: 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: #dcdfe6;
		cursor: pointer;
		-webkit-transition: border-color .3s, background-color .3s;
		transition: border-color .3s, background-color .3s;
		vertical-align: middle;
	}

	.el-switch.is-checked .el-switch__core::after {
		left: 100%;
		margin-left: -17px;
	}

	.el-switch__core::after {
		content: "";
		position: absolute;
		top: 1px;
		left: 1px;
		border-radius: 100%;
		-webkit-transition: all .3s;
		transition: all .3s;
		width: 16px;
		height: 16px;
		background-color: #fff;
	}

	.l-tip {
		font-size: 14px;
		color: #c2c2c2;
	}

	.el-image {
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	.but3 {
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
	}

	.but4 {
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		color: #fff;
		background-color: #80e1b6;
		border-color: #80e1b6;
	}

	.bot_rig {
		border-radius: 10px;
		background-color: white;
		width: 300px;
		float: left;
	}

	.name {
		cursor: pointer;
		/* 鼠标悬停时显示手形指针 */
		padding: 10px;
		/* 适当的内边距 */
		transition: background-color 0.3s;
		/* 背景颜色变化的过渡效果 */
		padding: 0 10px;
		margin: 0 24px;
		height: 52px;
		line-height: 50px;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		border-radius: 5px;
	}

	.selected {
		background-color: #f0f0f0;
		/* 灰色背景，或其他你希望的颜色 */
		border: 1px solid #ccc;
	}

	.name:hover {
		background-color: #f0f0f0;
		/* 鼠标悬停时的背景颜色 */
	}

	.name:focus {
		outline: none;
		background-color: #f0f0f0;
	}

	.el-tooltip__trigger {
		border: none;
		font-size: 26px;
		background-color: transparent;
	}

	.custom-tooltip div {
		width: 100px;
		transition: background-color 0.3s ease, transform 0.2s ease;
	}

	.custom-tooltip div:active {
		transform: translateY(1px);
	}

	.bot_rig_2 {
		background-color: white;
		margin-left: 10px;
		float: left;
		width: 476px;
		border-radius: 10px;
		padding: 10px;
	}

	.bot_rig_3 {
		background-color: white;
		float: left;
		margin-left: 10px;
		border-radius: 10px;
	}

	.el-overlay {
		background-color: rgba(0, 0, 0, 0.1);
	}
</style>